import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import styles from './leave.less';
import { Table, Pagination, Input } from 'antd';

const { Search } = Input;

class Leave extends React.Component {
    constructor (props) {
        super(props);
    }

    componentDidMount () {
        const {leave} = this.props;
        console.log(leave);
        this.getLeaves({
            ...leave,
            pageIndex: 1,
        });
    }

    getLeaves = (payload) => {
        const {dispatch} = this.props;
        dispatch({
            type: 'leave/getLeaves',
            payload: {
                ...payload,
            },
        });
    }


    render () {
        const Header = (props) => {
            const {leave} = props;
            return (
                <div className={styles.containerit}>
                    <Search
                        placeholder="请输入名称进行查询"
                        onSearch={(value) =>
                            this.getLeaves({
                                ...leave,
                                pageIndex: 1,
                                keywords: value,
                            })
                        }
                        enterButton
                    />
                </div>
            );
        };

        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '应急职务',
                dataIndex: 'rolestr',
            },
            {
                title: '手机',
                dataIndex: 'phone',
            },
            {
                title: '办公号码',
                dataIndex: 'callNum',
            },
            {
                title: '虚拟网号码',
                dataIndex: 'shortNum',
            },

        ];

        const {leave, loading} = this.props;
        const {pageIndex, pageCount, total, records} = leave;
        return(
            <div className={styles.container}>
                <Header leave={leave}/>
                <Table rowKey={id=>id.id}
                    columns={columns}
                    size="small"
                    loading={loading.global}
                    pagination={false}
                    dataSource={records} />
                <Pagination current={pageIndex} showTotal={()=> `共计 ${total} 条`}
                    style={{float: 'right', margin: 10}} size="small" total={total}
                    onChange={pages => {
                        this.getLeaves({
                            ...leave,
                            pageIndex: pages,
                        });
                    }}/>
            </div>
        );
    }
}
Leave.propTypes = {
    leave: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ leave, loading }) => ({ leave, loading }))(Leave);